<body ng-app="member_page">
<div>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <!--main标题-->
            <h1>
                客户管理
            </h1>
            <!--右侧快捷导航栏-->
                <ol class="breadcrumb">
                    <li class="active">客户管理</li>
                </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div id="member_list" class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">客户列表</h3>
                    </div>
                    <!-- general form elements -->
                    <div class="box-body">
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>当前状态</th>
                            </tr>
                            </thead>
                            <tbody>


                            <tr ng-repeat="member in memberList">

                                <!--<td><a href="javascript:setMemberDetail(${item.memberId})">${item.memberName}</a></td>-->
                                <td><a ng-href="" ng-click="todoList.archive()">{{member.memberName}}</a></td>
                                <td>{{member.gender}}</td>
                                <td>{{member.age}}</td>
                                <td>{0:'正常',1:'正常',2:'预警'}[{{member.status}}]</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div id="member_detail" class="col-md-6">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">客户详情</h3>
                    </div>
                    <!-- general form elements -->
                        <div id="member-detail-box" class="box-body">

                            <div id="member-detail-context" class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#activity" data-toggle="tab">基本信息</a></li>
                                    <li><a href="#timeline" data-toggle="tab">历史记录</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="active tab-pane" id="activity">
                                        <div class="row">
                                            <div hidden="hidden">
                                                <input id="memberId" value="${member.memberId}">
                                            </div>
                                            <div class="col-lg-6">
                                                <label class="col-lg-12">姓名 </label>
                                                <input id="memberName" type="text" class="form-control" value="${member.memberName}"
                                                       placeholder="点击输入 ..." disabled>
                                            </div>
                                            <div class="col-lg-6">
                                                <label class="col-lg-12">性别</label>

                                                <select id="gender" class="form-control select2" style="width: 100%;" disabled>
                                                    <option selected="selected">男</option>
                                                    <option>女</option>
                                                </select>
                                                <#--<input id="gender" type="text" class="form-control" placeholder="Enter ..." disabled>-->
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <label class="col-lg-12">出生日期</label>
                                                <div class="input-group date">
                                                    <div class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </div>
                                                    <input type="text" class="form-control pull-right" value="${member.birthday?date}"
                                                           id="datepicker" placeholder="点击输入 ..." disabled>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <label class="col-lg-12">联系电话</label>
                                                <input id="phoneNumber" type="text" class="form-control" value="${member.phoneNumber}"
                                                       placeholder="点击输入 ..." disabled>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <label class="col-lg-12">身份证号</label>
                                                <input id="certificate" type="text" class="form-control" value="${member.certificate}"
                                                       placeholder="点击输入 ..." disabled>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <label class="col-lg-12">联系地址</label>
                                                <input id="address" type="text" class="form-control" value="${member.address}"
                                                       placeholder="点击输入 ..." disabled>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-lg-12">
                                                <label class="col-lg-12"></label>
                                                <button id="editMember" type="submit" class="btn btn-default" onclick="editMember(this)">编辑</button>
                                                <button id="submit" type="submit" class="btn btn-info pull-right" onclick="submitMember()" disabled>提交</button>
                                            </div>
                                        </div>




                                    </div>
                                    <!-- /.box-body -->

                                    <!-- /.tab-pane -->
                                    <div class="tab-pane" id="timeline">
                                        <!-- The timeline -->
                                        <ul class="timeline timeline-inverse">

                                            <#list memberEvent as event>
                                                <!-- timeline time label -->
                                                <li class="time-label">

                                                    <#if event.eventType=2>
                    <span class="bg-red">
                    <#else><span class="bg-green">
                                                    </#if>
                                                    ${event.eventTime?date}
                                                    </span>
                                                </li>
                                                <!-- /.timeline-label -->
                                                <!-- timeline item -->
                                                <li>
                                                    <i class="fa fa-envelope bg-blue"></i>

                                                    <div class="timeline-item">
                                                        <span class="time"><i class="fa fa-clock-o"></i> ${event.eventTime?time}</span>

                                                        <h3 class="timeline-header"><strong>${event.title}</strong></h3>

                                                        <div class="timeline-body">
                                                            ${event.eventDesc}
                                                        </div>

                                                    </div>
                                                </li>
                                            </#list>


                                        </ul>

                                    </div>
                                    <!-- /.tab-pane -->

                                </div>
                                <div class="tab-content">

                                </div>
                                <!-- /.tab-content -->
                            </div>
                            <!-- /.nav-tabs-custom -->

                        </div>
                </div>
            </div>
        </div>
    </section>

</div>